<template>
	<view class="columnbox wdh-100 content">
		<image src="/static/img/indexbg.png" mode="widthFix" class="wdh-100 index-bg-img"></image>
		<view class="columnbox wdh-100  top-box">
			<view class="wdh-100" :style="{'height':menutop+'px'}"></view>
			<view v-if="isLogin" class="rowbox wdh-100 jus">
				<image :src="user.logo" mode="aspectFill" class="user-img"></image>
				<view class="columnbox als">
					<view class="user-name">{{user.name}}</view>
					<view style="font-size: 24rpx;color: #7a7a7a;margin-top: 10rpx;">{{user.zhicheng}}</view>
				</view>
			</view>
			<view v-else class="rowbox wdh-100 jus" @click="toLog">
				<image src="/static/img/tx.png" mode="aspectFill" class="user-img"></image>
				<view class="user-name">立即登录</view>
			</view>
			<view class="rowbox spb" style="width: 94%;" @click="showKaiFang">
				<view class="columnbox one-data">
					<view>{{statisticsInfo.daycfnum}}</view>
					<view>今日开方</view>
				</view>
				<view class="data-line"></view>
				<view class="columnbox one-data" @click="showKaiFang">
					<view>{{statisticsInfo.cfnum}}</view>
					<view>总开方</view>
				</view>
				<view class="data-line"></view>
				<view class="columnbox one-data" @click="showPatient">
					<view>{{statisticsInfo.dayhznum}}</view>
					<view>今日患者</view>
				</view>
				<view class="data-line"></view>
				<view class="columnbox one-data" @click="showPatient">
					<view>{{statisticsInfo.hznum}}</view>
					<view>总患者</view>
				</view>
			</view>
		</view>

		<view class=" columnbox als m-box">
			<view class="rowbox wdh-100 jus">
				<view class="columnbox one-m-box" @click="kaiFang">
					<image src="/static/img/kaifang.png" mode="widthFix"></image>
					患者开方
				</view>
				<view class="columnbox one-m-box" @click="inviteUser">
					<image src="/static/img/yaoqing.png" mode="widthFix"></image>
					邀请患者
				</view>
				<view class="columnbox one-m-box" @click="zhongyaoChufang">
					<image src="/static/img/more.png" mode="widthFix"></image>
					中药模板
				</view>
				<view class="columnbox one-m-box" @click="showXiyao">
					<image src="/static/img/mobanxy.png" mode="widthFix"></image>
					西药模版
				</view>
			</view>
			<view class="rowbox wdh-100 jus" style="margin-top: 32rpx;">
				<view class="columnbox one-m-box" @click="showGoods">
					<image src="/static/img/i-shop.png" mode="widthFix"></image>
					商品推荐
				</view>
				<view class="columnbox one-m-box" @click="allXiyao">
					<image src="/static/img/i-xiyao.png" mode="widthFix"></image>
					全部西药
				</view>
				<view class="columnbox one-m-box" @click="allZhongyao">
					<image src="/static/img/i-zhongyao.png" mode="widthFix"></image>
					全部中药
				</view>
				<view class="columnbox one-m-box" @click="showYaofang">
					<image src="/static/img/moban.png" mode="widthFix"></image>
					中药药方
				</view>
			</view>
		</view>
		<view class="columnbox q-box">
			<view class="q-title columnbox als">
				<view>常见问题</view>
				<view class="q-line"></view>
			</view>
			<view @click="showDetail(item.id)" class="rowbox wdh-100 one-q spb" v-for="(item,index) in qlist"
				:key='index'>
				<view class="q-name">{{item.name}}</view>
				<u-icon name="arrow-right" size="24rpx"></u-icon>
			</view>
			<!--  <u-collapse class="wdh-100" @change="change" @close="close" @open="open">
                <u-collapse-item v-for="(item,index) in qlist" :key='index' :title="item.name" name="Docs guide">
                    <text slot="title" class="u-page__item__title__slot-title">{{item.name}}</text>
                    <rich-text class="u-collapse-content" :nodes="item.content"></rich-text>
                </u-collapse-item>
            </u-collapse> -->
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				qlist: [],
				pageNo: 1,
				qtotal: 0,
				menutop: 20,
				statisticsInfo: {
					daycfnum: 0,
					cfnum: 0,
					dayhznum: 0,
					hznum: 0
				}, //统计数据
			}
		},
		computed: {
			user() {
				return store.state.user
			},
			isLogin() {
				return store.state.isLogin
			},
		},
		watch: {
			isLogin(newValue, oldValue) {
				if (newValue) {
					// this.getStatistics()
				}
			}
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo()
				this.getStatistics()
			}
		},
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top + uni.getMenuButtonBoundingClientRect().height
			// #endif
			if (options.phone) {
				uni.navigateTo({
					url: '/packageA/reg/reg?kefu=' + options.phone
				})
			}
			this.getQuestionList()
		},
		onReachBottom() {
			if (this.qlist.length < this.qtotal) {
				this.pageNo++
				this.getQuestionList()
			}
		},
		methods: {
			zhongyaoChufang() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/zhongyaoChufang/zhongyaoChufang'
					})
				} else {
					this.$noLog()
				}
			},
			// 获取用户信息
			getUserInfo() {
				this.$req.post('/doctor/doctorinfo', {
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					uni.setStorageSync('userinfo', res.data.data)
					this.$store.dispatch('actionsHandleUserInfoChange', res.data
						.data);
					if (res.data.data.status != 2) {
						getApp().globalData.conn.close();
						uni.clearStorageSync()
						this.$store.dispatch('actionsHandleIsLoginChange', false);
						uni.navigateTo({
							url: '/packageA/log/log'
						})
					}
				})
			},
			showKaiFang() {

			},
			// 全部西药
			allXiyao() {
				uni.navigateTo({
					url: '/packageA/allXiyao/allXiyao'
				})
			},
			// 全部中药
			allZhongyao() {
				uni.navigateTo({
					url: '/packageA/allZhongyao/allZhongyao'
				})
			},
			//统计数据
			getStatistics() {
				this.$req.post('/doctor/indexbb', {
					doctorid: uni.getStorageSync('uid')
				}).then(res => {
					this.statisticsInfo = res.data.data
				})
			},
			// 西药处方
			showXiyao() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/yaofang/westMedicine/list?type=homepage'
					})
				} else {
					this.$noLog()
				}
			},
			//展示患者
			showPatient() {
				if (this.isLogin) {
					uni.switchTab({
						url: '/pages/patient/patient'
					})
				} else {
					this.$noLog()
				}

			},
			// 邀请患者
			inviteUser() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/index/invite/index'
					})
				} else {
					this.$noLog()
				}
			},
			showDetail(id) {
				uni.navigateTo({
					url: '/pages/index/question/question?id=' + id
				})
			},
			getQuestionList() {
				this.$req.post('/admin/knowledges', {
					pageNo: this.pageNo,
					pageSize: 20
				}).then(res => {
					this.qlist = this.qlist.concat(res.data.data.data)
					this.qtotal = res.data.data.totalCount
				})
			},
			showGoods() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/goods/list'
					})
				} else {
					this.$noLog()
				}
			},
			toLog() {
				uni.navigateTo({
					url: '/packageA/log/log'
				})
			},
			showYaofang() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/yaofang/yaofang'
					})
				} else {
					this.$noLog()
				}
			},
			kaiFang() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/packageA/yaofang/choosePatient'
					})
				} else {
					this.$noLog()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F8FB;
		justify-content: flex-start;
	}

	.top-box {
		padding: 0 31rpx;
		padding-bottom: 100rpx;
		position: relative;
		z-index: 2;
		color: #050303;

		.user-img {
			width: 106rpx;
			height: 106rpx;
			border-radius: 100rpx;
			margin-right: 22rpx;
			border: #fff solid 2px;
		}

		.user-name {
			font-weight: bold;
			font-size: 38rpx;
			font-family: PingFang SC;
		}

		.one-data {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 40rpx;
		}

		.one-data>view:nth-child(1) {
			margin-bottom: 10rpx;
			font-weight: bold;
			font-family: DIN;
			font-size: 36rpx;
		}

		.one-data>view:nth-child(2) {
			opacity: 0.7;
			transform: scale(.9);
		}

		.data-line {
			// margin-top: 52rpx;
			// width: 1px;
			// height: 36rpx;
			// background: #FFFFFF;
		}
	}

	.m-box {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 11rpx 38rpx 0px rgba(155, 160, 165, 0.14);
		border-radius: 20rpx;
		margin-top: -70rpx;
		font-size: 24rpx;
		color: #202020;
		font-family: PingFang SC;
		position: relative;
		z-index: 2;
		padding: 20rpx 0;

		.one-m-box {
			width: 25%;

			image {
				width: 55rpx;
				height: 55rpx;
				margin-bottom: 10rpx;
			}
		}
	}

	.q-box {
		width: 710rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 40rpx;
		margin-bottom: 20rpx;
		position: relative;
		z-index: 2;

		.q-title {
			width: 100%;
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
			font-family: PingFang SC;
			line-height: 40rpx;
			margin-bottom: 10rpx;
		}

		.q-title>view:nth-child(1) {
			position: relative;
			z-index: 4;
		}

		.q-line {
			background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
			width: 70rpx;
			height: 15rpx;
			margin-top: -15rpx;
		}

		.one-q {
			font-family: PingFang SC;
			// font-weight: bold;
			font-size: 24rpx;
			color: #202020;
			padding: 20rpx 0;
			border-bottom: #DCE3EF solid 1px;

			.q-name {}
		}
	}

	.q-box>view:last-child {
		border: none;
	}

	.index-bg-img {
		position: fixed;
		top: 0;
		z-index: 1;
	}
</style>